<template>
    <div class="v-shop-felx-item">
        <div class="v-shop-cart-container">
            <van-checkbox v-model="allCheck">全选</van-checkbox>
            <div class="v-shop-total">
                <div class="v-shop-total-text-box">
                    <span class="v-shop-total-text">合计:</span>
                    <span class="v-shop-total-yen">&yen;{{total | tofixed}}</span>
                </div>
                <div class="v-shop-total-money-box">
                    <!-- <span class="v-shop-total-money-text">总额:</span>
                    <span class="v-shop-total-money-yen">&yen;{{total}}</span>
                    <span class="v-shop-total-money-sale-text">立减:</span>
                    <span class="v-shop-total-money-sale-yen">&yen;200.00</span> -->
                </div>
            </div>
            <div class="v-shop-settlement-btn">
                <van-button type="primary" bottom-action>结算</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { Checkbox,Button } from 'vant';
    import { mapGetters,mapActions } from 'vuex'
    export default {
        data(){
            return{
                checked:false
            }
        },
        components:{
            [Checkbox.name]:Checkbox,
            [Button.name]:Button 
        },
        computed:{
            ...mapGetters('cart',{
                products: 'cartProducts',
                checkoutStatus: 'checkoutStatus',
                total: 'cartTotalPrice'
            }),
            allCheck:{
                get(){
                    return this.$store.state.cart.allCheck
                },
                set(){
                    this.tiggerAllCheck()
                }
            }
        },
        methods: {
            checkout (products) {
                 this.$store.dispatch('cart/checkout', products)
            },
            ...mapActions('cart',['tiggerAllCheck'])
        },
        mounted() {
        },
        filters:{
            tofixed:function(value){
                if (value) {
                    return value.toFixed(2)
                }else{
                    return '0.00'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .v-shop-felx-item{
        .v-shop-cart-container{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 14px;
            padding-left: 10px;
            .v-shop-total{
                text-align: left;
                margin-left: 10px;
                flex: 1;
                .v-shop-total-text{
                    font-size: 15px;
                }
                .v-shop-total-yen{
                    font-size: 16px;
                    font-weight: bold;
                }
                .v-shop-total-money-box{
                    font-size: 12px;
                }
            }
            .v-shop-settlement-btn{
                width: 100px;
                font-size: 15px;
            }
            
        }
        
    }
</style>